<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background: skyblue;
    }
    .box2 {
      width: 100px;
      height: 100px;
      background: plum;
    }
  </style>
  <body>
    <div class="box">
      <div class="box2"></div>
    </div>
  </body>
</html>
<script>
  // 一、捕获 阻止目标冒泡
  //   var boxEle = document.querySelector(".box");
  //   boxEle.addEventListener("click", function (e) {
  //     console.log("点击了天蓝色");
  //   });
  //   var box2Ele = document.querySelector(".box2");
  //   box2Ele.addEventListener("click", function (e) {
  //     console.log("点击了紫罗兰色");
  //     e.stopPropagation();
  //   });

  //   二点击目标target
  var box2Ele = document.querySelector(".box2");
  box2Ele.onclick = function (e) {
    var target = e.target || e.srcElement;
    console.log(target);
  };
</script>
